<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>忘记密码</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/cowcat.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>


    <style>
        .mainView {
            justify-content: space-between;
        }

        .topDiv {
            display: flex;
            flex-direction: column;
        }

        .questionDiv {
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
        }

        .firstDiv {
            margin-left: 6.0185vw;
            margin-right: 6.0185vw !important;
            margin-top: 1rem;
        }

        .nextDiv {
            margin-left: 6.0185vw;
            margin-right: 6.0185vw;
            margin-bottom: 2rem;
        }

        .questionItemView {
            margin-left: 6.0185vw;
            margin-right: 6.0185vw;
            border-radius: 0.5rem;
            background: #B8DAFF;
            padding: 0.8rem 1rem 0.8rem 1rem;
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }

        .itemLine {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .leftText {
            width: 40%;
            color: #333;
        }

        .rightInput,
        .rightText {
            width: 60%;
            color: #666;
        }
    </style>

</head>

<body>
    <div class="mainView">
        <div class="topDiv">
            <div class="firstDiv">
                <input placeholder="请输入您的用户名或邮箱" class="form-control" v-model="topInputText" v-on:input="checkFinish" />
            </div>

            <div class="questionDiv" v-if="showQuestionDiv">
                <div class="questionItemView">
                    <div class="itemLine">
                        <span class="leftText">密保问题一</span>
                        <span class="rightText">{{question1}}</span>
                    </div>
                    <div class="itemLine">
                        <span class="leftText">答案</span><input v-on:input="checkAnswerFinish" v-model="answer1"
                            v-bind:readonly='isPlain' placeholder="请输入问题一的答案" class="form-control rightInput" />
                    </div>
                </div>
                <div class="questionItemView">
                    <div class="itemLine">
                        <span class="leftText">密保问题二</span>
                        <span class="rightText">{{question2}}</span>
                    </div>
                    <div class="itemLine">
                        <span class="leftText">答案</span><input v-on:input="checkAnswerFinish" v-model="answer2"
                            v-bind:readonly='isPlain' placeholder="请输入问题二的答案" class="form-control rightInput" />
                    </div>
                </div>
                <div class="questionItemView">
                    <div class="itemLine">
                        <span class="leftText">密保问题三</span>
                        <span class="rightText">{{question3}}</span>
                    </div>
                    <div class="itemLine">
                        <span class="leftText">答案</span><input v-on:input="checkAnswerFinish" v-model="answer3"
                            v-bind:readonly='isPlain' placeholder="请输入问题三的答案" class="form-control rightInput" />
                    </div>
                </div>
            </div>

        </div>

        <div class="nextDiv">
            <button type="button" class="btn btn-primary btn-block nextBtn" v-bind:disabled='flag'
                v-on:click="nextOnClick">{{btnText}}</button>
        </div>




        <div class="toastDiv">
            <div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                <div class="toast-header">
                    <img src="../images/icons8_attention_48px.png" class="rounded mr-2" alt="...">
                    <strong class="mr-auto">提示</strong>
                    <!--<small>now</small>-->
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body">
                    {{tipMsg}}
                </div>
            </div>
        </div>


        <!-- 重置密码弹框 -->
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">重置密码</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="newPassword" class="col-form-label">新密码:</label>
                            <input type="password" class="form-control" id="newPassword" v-model="newPassword1"
                                v-on:input="checkPasswordFinish">
                        </div>
                        <div class="form-group">
                            <label for="newPassword2" class="col-form-label">确认新密码:</label>
                            <input type="password" class="form-control" id="newPassword2" v-model="newPassword2"
                                v-on:input="checkPasswordFinish">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-bind:disabled="submitFlag"
                            v-on:click="submitPassword">提交</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- 修改密码成功提示框 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        恭喜您，密码重置成功！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" v-on:click="jumpToLogin">立即登录</button>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>
<script>
    const vueApp = {
        data() {
            return {
                topInputText: '',//用户名或密码输入框中的文字
                showQuestionDiv: false,
                flag: true,//是否禁用下一步按钮
                submitFlag:true,
                question1: '',
                question2: '',
                question3: '',
                answer1: '',
                answer2: '',
                answer3: '',
                tipMsg: '',
                currStep: 1,//记录当前所处的步骤
                btnText: '下一步',
                newPassword1: '',
                newPassword2: ''
            }
        },
        methods: {
            checkFinish() {
                this.flag = this.topInputText ? false : true
            },
            nextOnClick() {
                let _this = this
                if (this.currStep === 1) {
                    $.get('../getQuestions', { emailOrUsername: this.topInputText }, function (res) {
                        console.log(res)
                        if (res.data.isSuccess) {
                            let list = res.data.data
                            if (list && list.length == 3) {
                                _this.showQuestionDiv = true
                                _this.question1 = list[0]
                                _this.question2 = list[1]
                                _this.question3 = list[2]
                                _this.currStep = 2
                                _this.btnText = '提交答案'
                                _this.flag=true
                            }

                        } else {
                            _this.tipMsg = res.data.errorMsg
                            $('.toast').toast('show')
                        }
                    })
                } else if (this.currStep === 2) {
                    let params = {
                        emailOrUsername: _this.topInputText,
                        answer1: this.answer1,
                        answer2: this.answer2,
                        answer3: this.answer3
                    }
                    $.get('../verifyQuestions', params, function (res) {
                        console.log(res)
                        if (res.data.isSuccess) {
                            $('#staticBackdrop').modal('show')
                        } else {
                            _this.tipMsg = res.data.errorMsg
                            $('.toast').toast('show')
                        }
                    })
                }
            },
            submitPassword() {
                let _this = this
                if (this.newPassword1 != this.newPassword2) {
                    _this.tipMsg = '两次输入的密码不一致。'
                    $('.toast').toast('show')
                    return
                }
                let params = {
                    emailOrUsername: _this.topInputText,
                    answer1: this.answer1,
                    answer2: this.answer2,
                    answer3: this.answer3,
                    password: this.newPassword1
                }
                $.post('../resetPassword', params, function (res) {
                    console.log(res)
                    if (res.data.isSuccess) {
                        $('#staticBackdrop').modal('hide')
                        $('#exampleModal').modal('show')
                    } else {
                        _this.tipMsg = res.data.errorMsg
                        $('.toast').toast('show')
                    }
                })
            },
            jumpToLogin(){
                window.location.href='../index.html'
            },
            checkAnswerFinish(){
                if(this.answer1&&this.answer2&&this.answer3){
                    this.flag=false;
                }else{
                    this.flag=true
                }
            },
            checkPasswordFinish(){
                if(this.newPassword1&&this.newPassword2){
                    this.submitFlag=false
                }else{
                    this.submitFlag=true
                }
            }

        }
    }

    Vue.createApp(vueApp).mount(".mainView")
</script>

</html>